<template>
<!--商品图片-->
<div v-if="editDialogVisible3">
    <el-form>
            <el-form-item label="氛围图" prop="url">
            <div style="float: left;">
                <ul class="el-upload-list el-upload-list--picture-card">
                <li   v-for="(item ,i) in fileListSaleCopy" :key="index" :tabindex="index" class="el-upload-list__item is-success" >
                  <img :src="item.url" alt class="el-upload-list__item-thumbnail" />
                  <label class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </label>
                  <i class="el-icon-close"></i>
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview">
                      <i class="el-icon-zoom-in" @click="handlePictureCardPreview(null,item)"></i>
                    </span>
                    <span class="el-upload-list__item-delete">
                      <i class="el-icon-delete" @click="handleRemove(i)"></i>
                    </span>
                  </span>
                </li>
              </ul>
            </div>
            <el-upload v-if="fileListSaleCopy.length<1" :action="imgUpload" :before-upload="beforeAvatarUpload" :on-success="handleSuccessSale" list-type="picture-card" v-model="dataForm.pictureUrl" accept="image/gif, image/jpeg, image/jpg, image/png" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
            <p><span class="ng-binding">支持4M及以下的jpg、jpeg、png、gif格式图片</span></p>
          </el-form-item>
            <el-form-item label="氛围图有效时间" prop="url">
            <el-date-picker v-model="validStartTime" type="datetime" width="60%"  placeholder="请选择开始日期"></el-date-picker>
             <el-date-picker v-model="validEndTime" type="datetime" width="60%" placeholder="请选择结束日期"></el-date-picker>
            </el-form-item>

        <el-form-item label="商品图片">
            <el-upload class="upload-demo" width="30px" :action="imgUpload" :on-success="handleSuccess" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" :file-list="fileListCopy" ref="upload">
                <el-button size="mini" type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>
        <div style="width: 100%;margin-top: 20px;border: 1px solid black;min-height: 155px">
            <div ng-repeat="e in merchantProductPic" style="float: left;position: relative;height: 130px;margin-left: 15px;margin-top: 20px;" v-for="(item ,i) in fileListCopy" :key="i">
                <button style="border: none;background: #d45052;color: #FFFFFF;position: absolute;left: 0;top: -20px;" v-if="i==0">主图
                </button>
                <img ng-src="https://odfs.drcuiyutao.com/back-product/1579155277893_95.50992372836107_dc67660d-f4b9-44b5-a57b-c8673e0fea53.jpg" style="height: 100px;width: 100px;display: block" :src="item.url" @click="isMainPicture(fileListCopy,i,fileListCopy.length)" />
                <span @click="deletePic(i)" style="position: absolute;top: -5px;right: -5px;display: inline-block;width: 20px;height: 20px;background: red;text-align: center;border-radius: 50%; color: #f7f7f7;line-height: 16px;font-size: 19px;cursor: pointer;">X</span>
            </div>
            <div class style="clear: both"></div>
        </div>
        <el-form-item>
            <div>
                <p>
                    <span class="ng-binding">1. 至少上传一张图片，图片格式：jpg，jpeg，png，gif</span>
                </p>
                <p>
                    <span class="ng-binding">2. 推荐使用正方形图片，建议使用800*800px，同时前台支持放大镜</span>
                </p>
                <p>
                    <span class="ng-binding">3. 上传的图片将被同时上传到图片空间，默认存储在根目录</span>
                </p>
                <p>
                    <span class="ng-binding">4. 在列表中点击任意图片，设置为商品主图</span>
                </p>
            </div>
        </el-form-item>
    </el-form>
    <el-button style="text-align: center" :size="size" type="primary" @click.native="submitProductMedia">
        保存
    </el-button>
</div>
</template>

<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import { format, formatDate } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
export default {
  components: {
    KtButton,
    CyTable,
    TableColumnFilterDialog
  },
  data() {
    return {
      productId: this.$route.params.productId,
      fileList: [],
      fileListCopy: [],
      fileListSale: [],
      fileListSaleCopy: [],
      bill_photo_list: [], //氛围图列表
      imgUpload: this.utils.imgUploadUrl, //商品主图
      size: "small",
      editDialogVisible3: false,
      dialogVisible: false,
      dialogImageUrl: "",
      disabled: false,
      dataForm: {
        pictureUrl: "",
        documentLicense: ""
      },
      validStartTime:"",
      validEndTime:""
    };
  },
  mounted() {},
  methods: {
    //保存图片
    submitProductMedia: function() {
      let this_ = this;
      if (this.fileListCopy.length == 0) {
        this.$message({
          message: "请上传商品图片",
          type: "error"
        });
      } else {
        let params = {};
        if(this.validStartTime){
          params.validStartTime = this.validStartTime;
        }
        if(this.validEndTime){
          params.validEndTime = this.validEndTime;
        }
        let productMediaList = [];
        let productFWList = [];
        this.fileListCopy.forEach(function(item, index) {
          if (index == 0) {
            let obj = {};
            obj.pictureUrl = item.url;
            obj.isMainPicture = 1;
            obj.type = 0;
            obj.isMainPicture = 1;
            obj.productId = this_.productId;
            obj.sortValue = index + 1;
            productMediaList.push(obj);
          } else {
            let obj1 = {};
            obj1.pictureUrl = item.url;
            obj1.isMainPicture = 0;
            obj1.type = 0;
            obj1.productId = this_.productId;
            obj1.sortValue = index + 1;
            productMediaList.push(obj1);
          }
        });

        this.fileListSaleCopy.forEach(function(item, index) {
            let obj = {};
            obj.pictureUrl = item.url;
            obj.isMainPicture = 0;
            obj.type = 0;
            obj.productId = this_.productId;
            obj.sortValue = index + 1;
            productFWList.push(obj);
        });
        params.productFWList = productFWList;
        params.productMediaList = productMediaList;
        params.productId = this_.productId;
        this.utils.request.saveProductMedia(params, function(res) {
          if (res.code == "0000") {
            this_.$message({
              message: "操作成功",
              type: "success"
            });
          } else {
            this_.$message({
              message: "操作失败" + res.data.msg,
              type: "error"
            });
          }
        });
      }
    },
    //删除主图
    deletePic: function(i) {
      this.fileListCopy.splice(i, 1);
    },
    //是否主图
    isMainPicture: function(arr, index, length) {
      if (index != 0) {
        var moveNum = index - 0;
        for (var i = 0; i < moveNum; i++) {
          this.swapArray(arr, index, index - 1);
          index--;
        }
      } else {
        this.$message({
          message: "已是主图",
          type: "error"
        });
      }
    },
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    // 商品图片上传 商品主图
    handleSuccess: function(res, file) {
      let imgUrl = {};
      imgUrl.url = res.data.imgUrl;
      this.fileListCopy.push(imgUrl);
    },
    // 氛围图片上传
    handleSuccessSale: function(res, file) {
      let imgUrl = {};
      imgUrl.url = res.data.imgUrl;
      this.fileListSaleCopy.push(imgUrl);
    },
    //处理图片卡预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片移除氛围图
    handleRemove(i) {
      this.fileListSaleCopy.splice(i, 1);
    },
    handleDownload(file) {
      console.log(file);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 4;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
      }
      return isLt2M;
    },
    queryProductMedia: function() {
      debugger;
      let this_ = this;
      let params = {};
      this_.fileListCopy = [];
      params.productId = this.productId;
      this.utils.request.queryProductMedia(params, function(res) {
        if (res.code == "0000") {
          res.data.forEach(item => {
            let imgUrl = {};
            imgUrl.url = item.pictureUrl;
            this_.fileListCopy.push(imgUrl);
          });
        }
      });
    },
    queryFWMedia: function() {
      debugger;
      let this_ = this;
      let params = {};
      this_.fileListSaleCopy = [];
      params.productId = this.productId;
      this.utils.request.queryFWMedia(params, function(res) {
        if (res.code == "0000") {
          res.data.forEach(item => {
            this_.validStartTime =  item.valid_start_time;
            this_.validEndTime =  item.valid_end_time;
            let imgUrl = {};
            imgUrl.url  = item.picture_url;
            this_.fileListSaleCopy.push(imgUrl);
          });
        }
      });
    },
    init(param) {
      this.editDialogVisible3 = param.flag;
      this.productId = param.productId;
      this.queryProductMedia();
      this.queryFWMedia();
    }
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
